<template>
  <div class="car">
    <div class="title-msg">
      我的购物车 <span>待{{carLength}}条待付款</span>
    </div>

    <div class="option-site">
      <CarList :p-car-list="list"></CarList>
      <Bottom></Bottom>
    </div>

  </div>
</template>

<script>
  import CarList from "./childComps/CarList";
  import Bottom from "./childComps/Bottom";
  import { mapGetters } from 'vuex' //这个是vuex的内部函数,用于把store内的getters与局部组件的计算属性映射

  export default {
    name: "Car",
    components: {
      CarList,
      Bottom,
    },
    computed: {
      ...mapGetters ({
        carLength: 'getCarListLength',
        list: 'getCarList',
        // list: 'getCartList'
      })

    },
  }
</script>

<style scoped>
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .title-msg span {
    font-size: 16px;
    color: #cdb800;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    /*height: 530px;*/

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #ebebeb;

    /*background-color: green;*/
  }
</style>